<template>
	<view class="content" v-show="show">
		<!-- 头部导航 -->
		<view class="w-750 w-bj-cont" style="position: fixed; top: 0; left: 0;">
			<view class="h-100 w-row-justify-between-align">
				<view class="wh-80 w-row-center" @click="routerBack()">
					<image class="wh-40" src="../../../static/gane/fh.png"></image>
				</view>
				<view class="w-250 h-100 w-row-center w-wz-conts font-36">
					<text>结果记录</text>
				</view>
				<view class="wh-80 w-row-center">
					<uni-datetime-picker type="datetimerange" @change="changeTiem">
						<image class="wh-50" src="../../../static/gane/rq.png"></image>
					</uni-datetime-picker>
				</view>
			</view>
		</view>
		<view class="bwh-120"></view>
		<!-- 头部导航结束 -->

		<!-- 内容区域 -->
		<view class="w-720 h-130 w-bj-cont w-bor-12 w-row-center  m-bottom-10 font-24 w-wz-conts" v-for="(items,index) in tableData">
			<view class="p-2 w-row-justify-between-align">
				
				<view class="p-2 w-col-center">
					<text class="font-30 m-right-6">期号</text>
					<text class="p-2"></text>
					<text class="w-wz-gree font-30b">{{items.issue}}</text>			
				</view>
				<view class="p-10"></view>
				<view class="w-row-justify-center-align">
				
					<view v-for="(item,index) in items.numarr">
						<view class="w-70 w-column-align" v-if="index <=5">
							<view class="w-row-center numbers" :class="item.color">
								{{item.number}}
							</view>
							<text class="font-26 w-wz-cont">{{item.name}}</text>
						</view>
				
					</view>
				
					<view class="w-wz-white font-38b w-wz-conts m-right-10">
						+
					</view>
				
					<view v-if="items.numarr.length" class="w-70">
						<view class="w-row-center numbers" :class="items.numarr[6].color">
							{{items.numarr[6].number}}
						</view>
						<text class="font-26 w-wz-cont">{{items.numarr[6].name}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="w-300 h-80  w-row-center w-bor-12">
			<text class="w-wz-conts font-28" v-if="ispage">没有更多数据了...</text>
		</view>

		<view class="wh-30"></view>
	</view>

</template>

<script>
	import $H from '@/pages/common/request.js'
	export default {
		data() {
			return {
				tableData: [],
				show: false,
				start_time: '',
				end_time: '',
				pagenum: 1,
				total: null,
				ispage: false
			}
		},

		onLoad(e) {
			this.getUserAgentLog()
		},

		onReachBottom() {

			uni.showLoading({
				title: '加载数据中...'
			});
			this.pagenum++
			let timer = setInterval(() => {
				uni.hideLoading();
				if (this.tableData.length == this.total) {
					this.ispage = true
				} else {
					this.getUserAgentLog()
				}
				clearTimeout(timer)
			}, 600);

		},
	

		methods: {

			changeTiem(val) {
				this.start_time = val[0]
				this.end_time = val[1]
				this.tableData = []
				this.getUserAgentLog(true)
			},

			getUserAgentLog(isbool) {
				$H.post('/app_user_xianggang_redord', {
					pagenum: this.pagenum,
					start_time: this.start_time,
					end_time: this.end_time,
				}).then((res) => {
					console.log(res)
					if (res.code == 200) {
						if(isbool){
							if(res.data.data.length == 0){
								this.tableData = []
							}else{
								this.tableData.push(...res.data.data)
							}
						}else{
							this.tableData.push(...res.data.data)
							this.total = res.data.total
							this.show = true				
						}
						
						
					} else {
						return uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
				})
			},

			


		}
	}
</script>

<style scoped>
	.numbers {
		width: 45rpx;
		height: 45rpx;
		border: 3rpx #ccb581 solid;
		color: #ffffff;
		font-size: 26rpx;
		font-weight: 600;
		border-radius: 45rpx;
		text-align: center;
	}

	.green {
		background-image: radial-gradient(closest-side at 60% 15%, #ffffff, #00cf0a);
	}

	.red {
		background-image: radial-gradient(closest-side at 60% 15%, #ffffff, #dd0000);
	}

	.blue {
		background-image: radial-gradient(closest-side at 60% 15%, #ffffff, #0055ff);
	}

</style>



